<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>字体流光渐变特效</title>
		<style>
			.header{
				display: table;
				float: right;
				width: 600px;
			}
			.container {
				display: table-cell;
				vertical-align: middle;
				text-align: center;
				width: 600px;
				height: 400px;
				border: 1px solid #000000;				
				box-sizing: border-box;
				
			}
			.box{
				margin: 0;
				/*background: palegreen;*/
				position: relative;
			}
			img{
				vertical-align:middle;
			}
			.box:hover img{
				-webkit-filter: blur(2px);
			}
			
			.bac{
				position: absolute;
				height: 260px;width: 400px;
				top: 20px;
				left: 100px;
				box-sizing: border-box;
			}
			.box:hover .bac{
				opacity: 0.1;
				background: #FFFFFF;
				transition: all 2s ease-in-out;
			}
			
			.title{
				position: absolute;
				height: 260px;width: 400px;
				top: 20px;
				left: 100px;
				box-sizing: border-box;
			}
			.title:before{
				content: ' ';
				position: absolute;
				width: 0;height: 98%;
				left: 50%;
				top: 0;
			}
			.box:hover .title:before{
				content: ' ';
				border: 3px solid #FFFFFF;
				border-width: 3px 0;
				left: 0;
				height: 98%;width: 100%;
				transition: all 1s ease-in;
			}
			.title:after{
				content: ' ';
				position: absolute;
				width: 100%;height: 0;
				left: 0;
				top: 50%;
			}
			.box:hover .title:after{
				content: ' ';
				border: 3px solid #FFFFFF;
				border-width: 0 3px;
				left: 0;top: 0;
				height: 100%;width: 99%;
				transition: all 1s ease-in;
			}
			
			h2 {
				color: transparent;
				font-family: "微软雅黑";
				font-size: 40px;
				background-image: -webkit-linear-gradient(left, blue, yellow 25%, blue 50%, yellow 75%, blue 100%);
				background-size: 200% 100%;
				-webkit-background-clip: text;
				animation: streamer 5s infinite linear;
				line-height: 260px;margin: 0;
				opacity: 0;
			}
			.box:hover h2{
				opacity: 1;
				transition: all 0.5s ease;
			}
			
			
			@keyframes streamer {
				0% {
					background-position: 0 0;
				}
				100% {
					background-position: 100% 0;
				}
			}
		</style>
	</head>

	<body>
		<div class="header">
			<div class="container">
			<figure class="box">
				<img src="科技生活.jpg" height="300px" width="500px" draggable="false"/>
				<div class="bac"></div>
					<div class="title">
						<h2>welcome</h2>
					</div> 
			</figure>
			</div>
		</div>	
	</body>

</html>